<template>
    <el-aside class="page-menu-wrap" :class="isCollapse ? 'fold' : ''">
        <div class="site-logo">
            <img src="../../assets/logo.png" alt="">
            <div v-if="!isCollapse" class="site-name">睿云中台</div>
        </div>

        <MenuView :collapse="isCollapse" class="menu-page"></MenuView>
    </el-aside>
</template>

<script>
import ToggleMenuMixin from '@/mixins/toggle-menu.js'
import MenuView from './menu.vue'

export default {
    name: 'MenuSide',
    components: {
        MenuView
    },
    mixins: [ToggleMenuMixin]
}
</script>

<style lang="scss">
// @import "@/assets/styles/menu.scss";

.page-menu-wrap {
    overflow: hidden;
    flex: 0 0 240px;
    max-width: 240px;
    min-width: 240px;
    width: 240px !important;
    // background: $--menu-background-color;
    display: flex;
    flex-direction: column;
    transition: all 0.2s ease;

    .btn-wrap {
        height: 48px;
        line-height: 48px;
        padding-left: 20px;
        cursor: pointer;
        // border-top: $--menu-border;
        transition: all 0.2s ease;
        -webkit-box-shadow: inset 0 0 5px hsl(0deg 0% 100% / 5%);
        i {
            // color: $--menu-item-font-color;
            font-size: 16px !important;
        }
        &:hover i {
            // color: $--color-primary;
        }
    }

    .site-logo {
        position: relative;
        line-height: 60px;
        display: flex;
        align-items: center;
        padding-left:24px;
        height: 60px;
        background: #FFFFFF;
        box-shadow: 1px 2px 6px 0px rgba(48, 91, 137, 0.1);
        margin-bottom: 4px;
        transition: all 0.2s ease;

        a {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 60px;
            overflow: hidden;
            text-decoration: unset;
        }
        img {
            display: inline-block;
            height: 26px;
            vertical-align: middle;
        }
        .site-name {
            padding: 0 0 0 16px;
            margin-left: 16px;
            overflow: hidden;
            // color: $--menu-item-font-color;
            font-weight: 500;
            font-size: 18px;
            line-height: 60px;
            animation: fade-in;
            animation-duration: .2s;
            white-space: nowrap;
            font-family: PingFangSC-Medium, PingFang SC;
            position: relative;

            &:before {
                content: '';
                position: absolute;
                width: 1px;
                height: 18px;
                background: #DDDDDD;
                left: 0px;
                top: 20px;
            }
        }
    }

    &.fold {
        flex: 0 0 72px;
        max-width: 72px;
        min-width: 72px;
        width: 72px;

        .btn-wrap {
            padding-left: 16px;
        }

        .site-logo {
            .site-name {
                display: none;
            }
        }
    }
}

.menu-page {
    margin-top: 10px;
}
</style>
